<template>
    <div id="id">
        <div>
            <div class="id_title">
                {{tableData.title}}
            </div>
            <div class="id_time">
                {{tableData.createTime | TimeStatus}}
            </div>
            <div style="clear:both"></div>
            <div class="id_content" v-html="tableData.content">

            </div>
            <div style="color:#6a6a6a">
                <span>本文链接 : </span>
                <span style="color:#2479cc">http://www.azyzk.com</span>
                <div style="margin-top:10px;margin-bottom:10px;font-size:14px;"> ^_^ </div>
                <span>发表于 : {{tableData.createTime | TimeStatus}} </span>
                <span v-if="updateStatus">, 最后修改于 : {{tableData.updateTime}}</span>
            </div>
            <div class="id_bottom">
                <span class="PreviousPage">« 上篇文章</span>
                <span class="nextPage">下一篇文章 »</span>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
import moment from "moment";
export default {
    data() {
        return {
            tableData:[],
            updateStatus:false,
        };
    },
    created(){
        axios({
            url:"http://116.85.32.125:8765/api/QueryContentCount?id="+this.$route.params.id,
            method:"get",
        }).then(response=>{
            this.tableData = response.data.result;
            if(response.data.result.updateTime!=undefined){
                this.updateStatus = true;
            }
        }).catch((error)=>{
            console.log(error);
        })
    },
    filters:{
        TimeStatus(val){
            return moment(val).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    watch:{
        "$route"(val){
            console.log(val);
        }
    }
};
</script>
<style scoped lang="scss">
#id {
    margin-left: 250px;
    padding-left: 35px;
    padding-right: 85px;
    margin-top: 35px;
    .id_title {
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        float: left;
    }
    .id_time {
        float: right;
        height: 30px;
        line-height: 30px;
    }
    .id_content {
        margin-top: 30px;
        margin-bottom: 25px;
    }
    .id_bottom {
        height: 60px;
        line-height: 60px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        margin-top: 40px;
        color: #2479cc;
    }
    .PreviousPage {
        float: left;
        &:hover {
            cursor: pointer;
        }
    }
    .nextPage {
        float: right;
        &:hover {
            cursor: pointer;
        }
    }
}
</style>
